import React, { FC, Fragment } from 'react';
import { Chart, Geom, Axis, Tooltip, Coord, Facet, Label, Legend } from 'bizcharts';
import { Empty } from 'antd';

import { defaultColors, linearDefaultColors, linear90DefaultColors } from '@/constants/chartColors';

import styles from './index.less';

const { Global } = G2; // 获取 Global 全局对象
Global.registerTheme('newTheme', {
  colors: defaultColors,
});

type BasicChart = {
  data: [];
  theme?: string;
  axisX?: string;
  axisY?: string;
  subTitle?: string;
  facetType?: string;

  typeGeom?: string;
  sizeGeom?: number;
  positionGeom?: string;
  colorGeo?: string | any[];
  linearColor?: boolean;
  tooltipGeom?: any[];
  showLabel?: string;

  type?: 'rect' | 'polar' | 'theta' | 'helix';
  visibleX?: boolean;
  visibleY?: boolean;
  transpose?: boolean;
  gridX?: object | null;
  tickLineX?: object | null;
  lineX?: object | null;
  gridY?: object | null;
  tickLineY?: object | null;
  lineY?: object | null;
  labelX?: object | null;
  labelY?: object | null;

  useHtml?: boolean;
  showTitle?: boolean;
  htmlContent?: object;
  tooltipTitle?: string;
  tooltipProps?: object;

  padding?: number[];
  faceFields?: [];
  faceColor?: [];
  height?: number;
  innerRadius?: number;
  scale?: object;

  showLegend?: boolean;
  positionLegend?: string;
  legendFormat?: (arg0: any) => any;
  legendName?: string;
  legendOffsetY?: number;
  legendOffsetX?: number;
  selfLegend?: number;
  selfLegndKeys?: any[];
};

const BasicColumn: FC<BasicChart> = (props) => {
  const {
    subTitle,
    // chart 配置
    data = [],
    height = 260,
    padding = [20, 20, 40, 20],
    scale = null,
    theme = 'newTheme',
    // coord 配置
    transpose = false,
    innerRadius,
    type = 'rect',
    // axis 配置
    axisX = 'item',
    axisY = 'count',
    visibleX = true,
    visibleY = true,
    gridX = null,
    tickLineX = null,
    lineX = null,
    gridY = null,
    tickLineY = null,
    lineY = null,
    labelX = null,
    labelY = null,
    // Facet 配置
    facetType,
    faceFields,
    faceColor,
    // tooltip 配置，可以配合geom 的tooltip使用
    useHtml = false,
    htmlContent = null,
    showTitle = false,
    tooltipTitle = null,
    tooltipProps = {},
    // Geom 配置
    typeGeom = 'interval',
    positionGeom,
    colorGeo = '',
    linearColor = false,
    sizeGeom = '',
    tooltipGeom = null,
    showLabel = '',
    // legend 配置
    showLegend = false,
    positionLegend = '',
    legendName = '',
    legendOffsetY = 0,
    legendOffsetX = 0,
    legendFormat = null,
    // selfLegend 配置，自定义legend 展示(百分比 100最大)
    selfLegend = '',
    selfLegndKeys = [],
  } = props;
  let positionGeomResult = positionGeom;
  if (!positionGeomResult) {
    positionGeomResult = `${axisX}*${axisY}`;
  }
  let colorGeoResult = colorGeo || axisX;
  if (colorGeoResult && typeof colorGeo === 'string') {
    colorGeoResult = [
      colorGeoResult,
      linearColor ? (transpose ? linearDefaultColors : linear90DefaultColors) : defaultColors,
    ];
  }
  // tooltip 配置
  const tooltipPrps: any = {
    showTitle: showTitle,
    ...tooltipProps,
  };
  useHtml && (tooltipPrps.useHtml = useHtml);
  htmlContent && (tooltipPrps.htmlContent = htmlContent);
  tooltipTitle && (tooltipPrps.title = tooltipTitle);

  // geomprops 配置
  const geomProps: any = {
    color: colorGeoResult,
    type: typeGeom,
    position: positionGeomResult,
  };
  sizeGeom && (geomProps.size = sizeGeom);
  tooltipGeom && (geomProps.tooltip = tooltipGeom);
  // 设置横纵坐标 默认字体样式
  let labelXResult = labelX;
  let labelYResult = labelY;
  if (labelXResult && !labelX.textStyle) {
    labelX.textStyle = {
      textAlign: transpose ? 'end' : 'center',
      fill: 'rgba(0,0,0, 0.45)', // 文本的颜色
      fontSize: '12', // 文本大小
    };
  }
  if (labelYResult && !labelY.textStyle) {
    labelY.textStyle = {
      textAlign: transpose ? 'end' : 'center',
      fill: '#5c6f88', // 文本的颜色
      fontSize: '12', // 文本大小
    };
  }
  const emptyFlag = data.length === 0;
  return (
    <Fragment>
      <div
        style={{
          width: 100 - (emptyFlag ? 0 : selfLegend) + '%',
          display: selfLegend ? 'inline-block' : 'block',
          fontSize: 0,
        }}
      >
        {subTitle ? <div className={styles.subtitle}>{subTitle}</div> : null}
        {emptyFlag ? (
          <div
            style={{
              height: `${height}px`,
              overflow: 'hidden',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}
          >
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          </div>
        ) : (
          <Chart theme={theme} height={height} data={data} forceFit padding={padding} scale={scale}>
            {!facetType && (
              <Fragment>
                <Coord type={type} innerRadius={innerRadius} transpose={transpose} />
                <Axis
                  name={axisX}
                  visible={visibleX}
                  grid={gridX}
                  tickLine={tickLineX}
                  line={lineX}
                  label={labelXResult}
                />
                <Axis
                  name={axisY}
                  visible={visibleY}
                  grid={gridY}
                  tickLine={tickLineY}
                  line={lineY}
                  label={labelYResult}
                />
                {typeGeom === 'intervalStack' && (
                  <Geom {...geomProps}>{showLabel && <Label content={showLabel} />}</Geom>
                )}
                {typeGeom !== 'intervalStack' && (
                  <Geom shape="smooth" {...geomProps}>
                    {showLabel && <Label content={showLabel} />}
                  </Geom>
                )}
              </Fragment>
            )}
            <Tooltip {...tooltipPrps} />
            {showLegend && (
              <Legend
                name={legendName || axisX}
                offsetX={legendOffsetX}
                offsetY={legendOffsetY}
                position={positionLegend}
                itemFormatter={legendFormat}
              ></Legend>
            )}
            {facetType && (
              <Facet
                type={facetType}
                fields={faceFields}
                showTitle={false}
                transpose={transpose}
                padding={0}
                eachView={(view, facet) => {
                  view
                    .axis(false)
                    .interval()
                    .position(`${axisX}*${axisY}`)
                    .color(faceFields[0], faceColor);
                }}
              />
            )}
          </Chart>
        )}
      </div>
      {selfLegend && !emptyFlag && (
        <div
          style={{ width: `${selfLegend}%`, height: `${height}px`, overflowY: 'auto' }}
          className={styles['self-legend']}
        >
          {data.map((item, index) => {
            const colorIndex = index % defaultColors.length;
            return (
              <div key={item[axisX]} className={styles['legend-item']}>
                <div
                  className={styles['legend-color']}
                  style={{ background: defaultColors[colorIndex] }}
                ></div>
                {selfLegndKeys.map((detail) => {
                  return (
                    <div className={styles['legend-detail']} style={{ flex: detail.flex || 1 }}>
                      {(detail.prefix || '') + item[detail.key] + (detail.unit || '')}
                    </div>
                  );
                })}
              </div>
            );
          })}
        </div>
      )}
    </Fragment>
  );
};

export default BasicColumn;
